<template>
  <div v-if="topsong">
    <div class="songlist">
      <div>
        <div class="topimg">
          <img :src="topsong[0].al.picUrl" alt="" />
          <div @click="routerpush">
            <span class="iconfont icon-xiangzuo"></span>热门50首
          </div>
          <p>{{ topsong[0].ar[0].alias.name }}</p>
        </div>
      </div>
      <dl class="musiclist">
        <dt>
          <i class="iconfont icon-bofang"></i>播放全部<span
            >(共{{ topsong.length }}首)</span
          >
          <div @click="FocusonOnEvents">
            <span v-show="Focus">关注</span>
            <span v-show="!Focus">取关</span>
          </div>
        </dt>
        <dd
          v-for="(item, index) in topsong"
          :key="index"
          @click="setId(item.id)"
        >
          <h1>{{ index + 1 }}</h1>
          <div class="info">
            <h2>{{ item.name }}</h2>
            <h3>
              <span v-for="value in item.ar" :key="value.id">{{
                value.name
              }}</span>
            </h3>
          </div>
        </dd>
      </dl>
    </div>
  </div>
</template>
<script>
import { getArtistTopSong, getArtistSub } from "../../api/recommend";
import { Toast } from "vant";
export default {
  data() {
    return {
      topsong: null,
      Focus: true,
    };
  },
  created() {
    let queryId = this.$route.query.id;
    getArtistTopSong({ id: queryId }).then((data) => {
      this.topsong = data.songs;
    });
  },
  methods: {
    FocusonOnEvents() {
      this.Focus = !this.Focus;
      if (this.Focus) {
        Toast("取消关注");
        getArtistSub({ id: this.$route.query.id, t: 0 }).then((data) => {
          console.log(data);
        });
      } else {
        Toast("关注成功");
        getArtistSub({ id: this.$route.query.id, t: 1 }).then((data) => {
          console.log(data);
        });
      }
    },
    setId(id) {
      this.$emit('get-like', id);
      this.$emit("get-play-all-id", this.$route.query.id);
      this.$emit("get-player-id", id);
    },
    routerpush() {
      this.$router.go("-1");
    },
  },
};
</script>

<style lang="less">
.songlist {
  width: 100%;
  div {
    width: 100%;
    height: 50vh;
    .topimg {
      width: 100%;
      height: 50vh;
      position: fixed;
      top: 0px;
      left: 0px;
      img {
        width: 100%;
        height: 100%;
      }
      div {
        width: auto;
        height: 20px;
        position: absolute;
        top: 5px;
        left: 5px;
        font-weight: bold;
        color: white;
      }
      p {
        position: absolute;
        bottom: 45px;
        left: 15px;
        font-size: 20px;
        font-weight: bold;
        color: white;
      }
    }
  }
  .musiclist {
    width: 100%;
    height: 50vh;
    background-color: white;
    padding-bottom: 50px;
    dt {
      width: 100%;
      height: 35px;
      line-height: 35px;
      margin: 0 auto;
      border-bottom: 1px solid #e3e3e3;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      position: fixed;
      top: 45%;
      left: 0;
      background-color: white;
      i {
        font-size: 18px;
        margin: 0 12px;
      }
      span {
        color: #7f8080;
      }
      div {
        width: 10%;
        float: right;
        position: relative;
        span {
          position: absolute;
          &:nth-child(1) {
            color: red;
          }
        }
      }
    }
    dd {
      display: flex;
      width: 94%;
      height: 52px;
      line-height: 52px;
      margin: 0 auto;
      border-bottom: 1px solid #e3e3e3;
      overflow: hidden; /*溢出隐藏*/
      text-overflow: ellipsis; /*以省略号...显示*/
      white-space: nowrap; /*强制不换行*/
      h1 {
        font-size: 12px;
        margin: 0 18px;
      }
      .info {
        line-height: normal;
        padding: 7px 0;
        h2 {
          font-size: 14px;
          padding-top: 3px;
        }
        h3 {
          color: #6d6e6e;
          font-size: 10px;
          padding-bottom: 1px;
        }
      }
    }
  }
}
</style>